<template>
  <div id="jqzhanshipaiming" class="p-3 h-full w-full"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import {onBeforeUnmount, onMounted, watch } from 'vue';

interface jingqingInfo {
  deptName: string[]
  count: number[]
}

const props = defineProps({
  data: {
    type: Object as () => jingqingInfo,
    require: true,
  }
})

//加载状态
const model = defineModel()

//初始化ecahrts实例
let myChart: echarts.ECharts

function resz() {
  myChart.resize();
}

onBeforeUnmount(() => {
  window.removeEventListener('resize', resz);
})

onMounted(() => {
  myChart = echarts.init(document.getElementById('jqzhanshipaiming') as HTMLDivElement)
  renderChart()
  window.addEventListener('resize', resz);
  console.log(model.value);
  model.value = false
})
//构建option配置对象
const renderChart = () => {
  const option = {
    title: {
      text: '处警排名情况',
      left: 'center',
      textStyle: {
        color: '#fff'
      },
      subtextStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        //magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    xAxis: {
      type: 'category',
      data: props.data!.deptName,
      axisLabel: {
        interval:0,
        rotate: -60,
        color: '#9eb1c8'
      },
      axisLine: {
        show: true,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      max: function (value: { max: number, min: number }) {
        return value.max * 1.3
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false
      }
    },
    //图标的位置
    grid: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      containLabel: true,
    },
    //核心配置
    series: [
      {
        data: props.data!.count,
        type: 'bar',
        //字体
        label: {
          show: true,
          position: 'top',
          color: '#fff'
        },
        //showBackground:true,
        // backgroundStyle:{
        //   color:'rgba(180,180,180,0.2)'
        // },
        //每个柱子的样式
        itemStyle: {
          color: '#479AD3',
          borderRadius: 5,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 5
        },

      }
    ]
  }
  //3.通过实例填充图标
  myChart.setOption(option)

}
//检测来自父组件的数据变化更新图标
watch(() => props.data, () => {
  myChart.clear()
  renderChart()
  model.value = false
  //myChart.resize();
})



</script>

<style scoped></style>